<template>
  <view>
    <view class="test">
      <web-view
		v-if="!showPosterDialog"
        :webview-styles="webviewStyles"
        :src="htmlSrc"
        @message="handleMessage"
      ></web-view>
    </view>
	<!-- 分享海报 -->
	<view class="hide" >
		<poster :canvaData="canvaData" @success="success"></poster>
	</view>
	<!-- 分享海报弹窗 -->
	<view class="fix-box" v-if="showPosterDialog">
		<view class="imgbox">
			<image :src="imgUrl" class="poster" ></image>
			<!-- <image :src="htmmQrCode" class="htmlSrc" mode=""></image> -->
		</view>
		<view class="share-content">
			<view class="p-box">
				<view class="item share-tx-weChat" @tap="posterShare('weixin', 'WXSceneSession')">
					<view class="txt">微信好友</view>
				</view>
				<view class="item share-tx-friends" @tap="posterShare('weixin', 'WXSenceTimeline')">
					<view class="txt">朋友圈</view>
				</view>
				<view class="item share-xl-weiBo" @tap="posterShare('sinaweibo', '')">
					<view class="txt">微博</view>
				</view>
				<view class="item down" @tap="saveImg">
					<view class="txt" >保存本地</view>
				</view>
			</view>
		</view>
		<view class="cancel" @tap="hidePoster()">取消</view>
	</view>
	
  </view>
</template>

<script>
import poster from './poster.vue'
	
import api from '@/common/lib/request.js';
export default {
  components: {
	  poster
  },
  data() {
    return {
	  showPosterDialog: false,
	  imgUrl: '', // 海报背景： http://www.creb.com.cn/r/cms/www/default/boots/images/mobile/poster_bg.png
	  painting: {},
	  defaultUrl: 'http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202111/15145532461k.jpg', // 默认图片
	  canvaData: {},
	  htmmQrCode: "",
      newsContent: "",
      htmlSrc: "",
	  qrSrc: '',
      webviewStyles: {
        progress: "#FF3333"
      },
      token: '',
      thumb: "",
      id: "",
      title: "",
	  description:"",
	  shareimage:"",
      htmlSrc: "",
	  token: '',
	  shareImg: '',
      description: '',
	  releaseDate: ''
    }
  },
  onLoad(options) {
	// options.id = 167075
    const _this = this;
    _this.token = uni.getStorageSync('token');
	
    if (options.link.indexOf('?') > -1) {
      this.htmlSrc = options.link;
    } else {
      this.htmlSrc = options.link + '?id=' + options.id;
      // this.htmlSrc = 'http://www.creb.com.cn/staticdir/www/index.html';
    }
    if (_this.token) {
      this.htmlSrc += '&token=' + _this.token;
    }
	
	_this.shareimage = options.shareimage;
	_this.description = options.description;
	_this.thumb = options.thumb;
    _this.title = options.title;
	
	// this.htmlSrc =  'http://192.168.1.105:8080/mobile/dynamic.jhtml?id=' + options.id;
	this.id = options.id;
	this.getQrcode()
	this.getContent()
  },
  methods: {
	initPoster(type){
		console.log('initPoster', type)
		if(!this.htmmQrCode) {
			return
		}
		if (!this.painting.views || !this.painting.views.length) {
			return
		}
		// 默认标题
		if(!this.painting.views[1].text) {
			let title = this.title
			if(title.length>30) {
				title = title.substr(0,35) + '...'
			}
			this.painting.views[1].text = title
		}
		// 默认时间
		if(!this.painting.views[2].text) {
			this.painting.views[2].text = this.releaseDate
		}
		// 默认图片 defaultUrl
		if(!this.painting.views[3].url) {
			this.painting.views[3].url = this.defaultUrl
		}
		// 默认内容
		if(!this.painting.views[4].text) {
			this.painting.views[4].text = this.description || ''
		}
		// 二维码
		let codeView = {
			type: 'image',
			url: this.htmmQrCode,
			css: {
			  left: '302px',
			  top: '605px',
			  width: '45px',
			  height: '45px',
			},
		}
		this.painting.views.push(codeView)
		this.canvaData = this.painting
	},
    getQrcode() {
		const _this = this
		api.request({
			method: 'GET',
			clear: true,
			coverUrl: 'http://www.creb.com.cn/api/front/content/geterweima?id='+_this.id,
		}).then(response => {
			console.log('getQrcode',_this.id, response)
			_this.htmmQrCode = response.url || ''
			_this.initPoster('getQrcode')
		})
	},
	getContent() {
		if(!this.id) return
		const _this = this
		api.request({
			method: 'POST',
			coverUrl: 'http://www.creb.com.cn/api/front/content/get',
			data: {
				id: _this.id,
				trimHtml: false,
				format: 0,
			}
		}).then(response => {
			console.log('getContent``````````', response)
			_this.shareImg = response.attr_shareimage
			_this.description = response.description
			_this.title = response.title;
			_this.releaseDate = response.releaseDate
			if (!response.attr_shareContent) return
			_this.painting = JSON.parse(response.attr_shareContent)
			_this.initPoster('getContent')
		}).catch(err => {
			console.log(err);
		});
	},    
    hidePoster() {
		this.showPosterDialog = false
	},
	toReporter(id){
		uni.navigateTo({
			url: '/pages/index/reporter/reporter?id=' + id
		})
	},
	showPoster(){
		this.showPosterDialog = true
	},
	success(src) {
	  // console.log('success')
	  // console.log('success',src)
	  this.imgUrl = src;
	},
	fail(err) {
		console.log('fail', err)
	},
	// 分享到微信聊天页面
    shareWxSession() {
      this.share("weixin", "WXSceneSession")
    },
    // 分享到微信朋友圈
    shareWxTimeline() {
      this.share("weixin", "WXSenceTimeline")
    },
    // 分享到微博
    shareSinaWeibo() {
        uni.share({
            provider: 'sinaweibo',
            type: 1,
            href: this.htmlSrc,
            title: this.title,
			summary: this.description?this.description:"影响每个热衷思考的人",
			imageUrl: this.shareImg?this.shareImg:'http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202111/17113319o4ri.jpg',
            success: function (res) {
                // console.log("success:" + JSON.stringify(res));
            },
            fail: function (err) {
                // console.log("fail:" + JSON.stringify(err));
            }
        });
    },
    // 分享到qq
    shareQq() {
      this.share("qq")
    },
	saveImg() {
		uni.saveImageToPhotosAlbum({
			filePath: this.imgUrl,
			success() {
				this.showPosterDialog = false
				uni.showToast({
				    title: '保存成功',
				    duration: 2000
				});
			},
			fail() {
				this.showPosterDialog = false
				uni.showToast({
				    title: '保存失败',
				    duration: 2000
				});
			}
		})
	},
	posterShare(provider, scene) {
		uni.share({
		  provider: provider,
		  scene: scene,
		  type: 2,
		  title: this.title,
		  summary: this.description?this.description:"影响每个热衷思考的人",
		  imageUrl: this.imgUrl,
		  success: function (res) {
		    // console.log("success:" + JSON.stringify(res));
		  },
		  fail: function (err) {
		    // console.log("fail:" + JSON.stringify(err));
		  }
		});
	},
    share(type, scene) {
      uni.share({
        provider: type,
        scene: scene,
        type: 0,
        href: this.htmlSrc,
        title: this.title,
        summary: this.description?this.description:"影响每个热衷思考的人",
		imageUrl: this.shareImg?this.shareImg:'http://cmszfb.oss-cn-beijing.aliyuncs.com/u/cms/www/202111/17113319o4ri.jpg',
		success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    },
    handleMessage(evt) {
      let action = evt.detail.data[0].action;
      if (action == 'share-tx-weChat') {
        this.shareWxSession();
      } else if (action == 'share-tx-friends') {
        this.shareWxTimeline();
      } else if (action == 'share-xl-weiBo') {
        this.shareSinaWeibo();
      } else if(action == 'share-xl-qq') {
        this.shareQq();
      } else if(action == 'toReporter') {
		this.toReporter(evt.detail.data[0].id)
	  } else if(action == 'showPoster') {
		this.showPoster()
	  }
    }
  }
}
</script>

<style>
	.hide{
		height: 0;
		overflow: hidden;
	}
	
	.fix-box{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.4);
		z-index: 10;
	}
	.imgbox{
		position: fixed;
		z-index: 20;
		bottom: 190px;
		left: 50%;
		margin-left: -110px;
		width: 220px;
		height: 420px;
	}
	.poster{
		width: 100%;
		height: 420px;
	}
	.htmlSrc{
		position: fixed;
		z-index: 30;
		bottom: 190px;
		left: 50%;
		margin-left: -110px;
		width: 105px;
		height: 105px;
	}
	.share-content{
		position: fixed;
		z-index: 20;
		width: 100%;
		margin: 0;
		background: #f9f9f9;
		left: 0;
		bottom: 0;
		height: 170px;
	}
	.p-box{
		margin: 20px 20px 30px;
		display: flex;
		justify-content: space-between;
	}
	.item{
		width: 65px;
		height: 80px;
		vertical-align: bottom;
		display: flex;
		align-items: end;
		position: relative;
	}
	.share-tx-weChat{
		background: url('http://www.creb.com.cn/r/cms/www/default/boots/images/mobile/wx.jpg') no-repeat center top;
		background-size: 60px;
	}
	.share-tx-friends{
		background: url('http://www.creb.com.cn/r/cms/www/default/boots/images/mobile/wxpyq.jpg') no-repeat center top;
		background-size: 60px;
	}
	.share-xl-weiBo{
		background: url('http://www.creb.com.cn/r/cms/www/default/boots/images/mobile/wb.jpg') no-repeat center top;
		background-size: 60px;
	}
	.down{
		background: url('http://www.creb.com.cn/r/cms/www/default/boots/images/mobile/down.jpg') no-repeat center top;
		background-size: 60px;
	}
	.txt{
		position: absolute;
		left: 0;
		bottom: -10px;
		width: 100%;
		text-align: center;
		color: #838383;
	}
	.cancel{
		position: fixed;
		z-index: 30;
		bottom: 0;
		width: 100%;
		height: 40px;
		left: 0;
		text-align: center;
		line-height: 40px;
		border-top: 1px solid #e8e8e8;
	}
</style>
